import React from 'react';
import { Button } from 'antd';
import { Table, Tag, Space, Form } from 'antd';
import { Select } from 'antd';
import './group.css';

const { Option } = Select;

const columns = [
  {
    title: '院系',
    dataIndex: '院系',
    key: '院系',
  },
  {
    title: '项目名称',
    dataIndex: '项目名称',
    key: '项目名称',
  },
  {
    title: '责任老师',
    dataIndex: '责任老师',
    key: '责任老师',
  },
  {
    title: '小组',
    dataIndex: '小组',
    key: '小组',
  },
  {
    title: '小组长',
    dataIndex: '小组长',
    key: '小组长',
  },
  {
    title: '项目成员',
    dataIndex: '项目成员',
    key: '项目成员',
  },
  {
    title: '综合评分',
    dataIndex: '综合评分',
    key: '综合评分',
  },
  {
    title: '作业评分',
    key: '作业评分',
    render: () => (
      <Space size="middle">
        <a>查看详情</a>
      </Space>
    ),
  },
];

const data = [
  {
    院系: '软件学院',
    项目名称: '学生考勤管理系统',
    责任老师: 'SKaM',
    小组: '1',
    小组长: '张无忌',
    项目成员: 'many',
    综合评分: '999',
  },
  {
    院系: '软件学院',
    项目名称: '学生考勤管理系统',
    责任老师: 'SKaM',
    小组: '1',
    小组长: '张无忌',
    项目成员: 'many',
    综合评分: '999',
  },
  {
    院系: '软件学院',
    项目名称: '学生考勤管理系统',
    责任老师: 'SKaM',
    小组: '1',
    小组长: '张无忌',
    项目成员: 'many',
    综合评分: '999',
  },
  {
    院系: '软件学院',
    项目名称: '学生考勤管理系统',
    责任老师: 'SKaM',
    小组: '1',
    小组长: '张无忌',
    项目成员: 'many',
    综合评分: '999',
  },
  {
    院系: '软件学院',
    项目名称: '学生考勤管理系统',
    责任老师: 'SKaM',
    小组: '1',
    小组长: '张无忌',
    项目成员: 'many',
    综合评分: '999',
  },
];

//孙康铭
const group = () => {
  return (
    <div>
      <div className="tabBar">
        <Button style={{ padding: '5px 50px' }}>个人评分</Button>
        <Button type="primary" style={{ padding: '5px 50px' }}>
          小组评分
        </Button>
        <hr />
      </div>
      <Form>
        <div className="prjName">
          项目名称:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            className="Select"
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
        </div>
        <div className="groupName">
          小组名称:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            className="Select"
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
          <div className="btn">
            <Button type="primary" style={{ padding: '5px 20px' }}>
              查询
            </Button>
            <Button style={{ padding: '5px 20px' }}>重置</Button>
          </div>
        </div>
        <div className="form">
          <Table columns={columns} dataSource={data} />
        </div>
      </Form>
    </div>
  );
};

export default group;
